import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { MaterialBottomTabView, createMaterialBottomTabNavigator } from 'react-native-paper/react-navigation';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import StackNavigation from './StackNavigation';
import Setting from './Setting';

const Tab = createMaterialBottomTabNavigator();

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

// const Tab = createBottomTabNavigator();
export default function TabNavigation() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        // initialRouteName="Settings"
        activeColor="#E7ADAC"
        inactiveColor="#797979"
        barStyle={{ backgroundColor: '#8D91AA', paddingBottom: 2 }}
      >
        <Tab.Screen name="Home" component={StackNavigation} options={{
          tabBarLabel: '主页', tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="home" color={color} size={26} />
          )
        }} />
        <Tab.Screen name="Settings" component={Setting} options={{
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="cog-outline" color={color} size={26} />
          )
        }} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}